<template>
  <div class="fullSlide">
    <slider :options="options">
      <slideritem :style="img1"/>
      <slideritem :style="img2"/>
      <div slot="loading">loading...</div>
    </slider>
  </div>
</template>

<script>
  import {slider, slideritem} from 'vue-concise-slider'

  export default {
    name: "HomeBanner",
    data() {
      return {
        img1: 'background: url(' + require('@img/banner1.jpg') + ') center 0 no-repeat;width:100%;',
        img2: 'background: url(' + require('@img/banner2.jpg') + ') center 0 no-repeat;width:100%;',
        options: {
          effect: 'fade',//滚动('slide'),渐变('fade'),旋转('coverflow')
          currentPage: 0,//初始化时为第几页
          thresholdDistance: 100,//滑动判定距离
          thresholdTime: 300,//滑动判定时间
          autoplay: 5000,//自动滚动[ms]
          loop: true,//循环滚动
          direction: 'horizontal',//水平滚动('horizontal'),可设置为垂直滚动('vertical')
          loopedSlides: 1,//无限滚动前后遍历数
          slidesToScroll: 1,//每次滑动项数
          timingFunction: 'ease', // 滑动方式
          speed: 800, // 滑动时间
          renderPagination: (h, index) => {
            return h('div', {
              class: 'bullet-item'
            })
          }
        }
      }
    },
    components: {
      slider,
      slideritem
    }
  }
</script>

<style>
  .fullSlide .bullet-item {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    width: 60px;
    height: 8px;
    margin: 0 5px;
    overflow: hidden;
    background: #fff;
    font-size: 0;
    color: #fff;
  }

  .fullSlide .slider-pagination-bullet-active-render {
    background: #0192ed;
  }
</style>